<template>
    <view class="index">
		<view class="index-header" :style="'padding-top:'+statusBarHeight+'px'">
			<!-- 统计 -->
		<!-- 今日业绩 -->
		<view class="index-data1">
			<view class="top" @tap.stop="changeTabData1()">
				<view class="txt">今日业绩</view>
				<view class="right" @tap.stop="changeTabData1()">
					<!-- <text>全部</text> -->
					<image class="ico" :src="IMAGE_STATIC+'/images/icon-down.png'" mode=""/>
				</view>
			</view>
			<view class="info">
				<view class="item">
					<view>
					<view class="txt">
						<image class="ico" :src="IMAGE_STATIC+'/index/icon-shou.png'" mode=""/>
						分润收益（元）</view>
						<view class="num" @click="goURl('/pages/userInfo/income')">{{ bottomData.benefit_money? (bottomData.benefit_money):0 }}</view>
					</view>
				</view>
				<view class="item">
					<view>
					<view class="txt">
						<image class="ico" :src="IMAGE_STATIC+'/index/icon-trade.png'" mode=""/>
						交易量(元)</view>
					<view class="num" @click="goURl('/pages/tradeOrder/tradeOrder')">{{bottomData.trade_money? viewCount(bottomData.trade_money):0}}</view>
				</view>
				</view>
			</view>
			<view class="info1">
				<view class="item">
					<view class="txt" >
						<text class="dot">&nbsp;</text>
						激活(台)</view>
					<view class="num" @click="goURl('/pages/userInfo/income')">{{bottomData.active_num?bottomData.active_num:0}}</view>
				</view>
				<view class="item">
					<view class="txt">
						<text class="dot dot1"></text>
						达标(期)</view>
					<view class="num" @click="goURl('/pages/userInfo/income')">{{bottomData.reach_num?bottomData.reach_num:0}}</view>
				</view>
				<view class="item">
					<view class="txt">
						<text class="dot dot2"></text>
						领机具(台)</view>
					<view class="num" @click="goURl('/pages/tradeOrder/tradeOrder')">{{bottomData.receive_num?bottomData.receive_num:0}}</view>
				</view>
			</view>
		</view>
		</view>
        <!-- 本月业绩 -->
		<view class="index-data2">
			<view class="title">
				<view class="left"><image :src="IMAGE_STATIC + '/index/statistics-1.png'" class="ico1" mode="heightFix" />本月业绩</view>
				<view class="sort"  @tap.stop="changeTabData()">
					筛选<image :src="IMAGE_STATIC + '/images/sort.png'" class="ico" mode="heightFix" />
				</view>
			</view>
			<!-- <view class="tab">
				<view :class="[currIndex==0?'active':'','item']" @click="changeTabData(0)">全部</view>
				<view :class="[currIndex==1?'active':'','item']" @click="changeTabData(1)">直属商户</view>
				<view :class="[currIndex==2?'active':'','item']" @click="changeTabData(2)">团队</view>
			</view> -->
			<view class="info">
				<view class="item">
					<view class="txt">交易量(元)</view>
					<view class="num">{{viewCount(benefitList.trade_money) || 0}}</view>
				</view>
				<view class="item">
					<view class="txt">交易笔数(笔)</view>
					<view class="num">{{(benefitList.trade_num) || 0}}</view>
				</view>
				<view class="item">
					<view class="txt">新增团队成员(人)</view>
					<view class="num">{{(benefitList.add_user_num) || 0}}</view>
				</view>
				<view class="item">
					<view class="txt">激活(台)</view>
					<view class="num" @click="goURl('/pages/userInfo/income')">{{benefitList.active_num || 0}}</view>
				</view>
				<view class="item">
					<view class="txt">达标(期)</view>
					<view class="num" @click="goURl('/pages/userInfo/income')">{{benefitList.reach_num || 0}}</view>
				</view>
				<view class="item">
					<view class="txt">领机具(台)</view>
					<view class="num" @click="goURl('/pages/tradeOrder/tradeOrder')">{{benefitList.machinery_num || 0}}</view>
				</view>
			</view>
		</view>
		<!-- 我的机具 -->
		<view class="index-data3">
			<view class="title">
				<view class="left">
					<image :src="IMAGE_STATIC + '/index/statistics-2.png'" class="ico1" mode="heightFix" />我的机具
				</view>
				<view class="sort"  @tap.stop="changeTabData2()">
					筛选<image :src="IMAGE_STATIC + '/images/sort.png'" class="ico" mode="heightFix" />
				</view>
				</view>
			<view class="chart-box">
				<view class="chart">
					<canvas canvas-id="mayChart" class="chart-canvas" 
					 :style="{width: '100%', height: '100%'}" @touchstart="touchRing"></canvas>
				</view>
				<view class="info">
					<view class="item">
						<view class="txt p">共计</view>
						<view class="num">{{middleData.total_machinery_num || 0}}(台)</view>
					</view>
					<view class="item">
						<view class="txt"><text class="dot"></text>待激活</view>
						<view class="num">{{middleData.machinery_noactive_num|| 0}}(台)</view>
					</view>
					<view class="item">
						<view class="txt"><text class="dot dot1"></text>已激活</view>
						<view class="num">{{middleData.machinery_active_num || 0}}(台)</view>
					</view>
				</view>
			</view>
		</view>
        <!-- 底部导航 -->
		<initTabbar :current-page="1" />
    </view>
</template>

<script>
import initTabbar from '@/pagesMain/init-tabbar.vue';
// 引入uCharts
import uCharts from './u-echarts/u-charts'; //引入uCharts
export default {
    components: {
		initTabbar,
	},
	data () {
		return {
			IMAGE_STATIC: this.$url.assetsPath, // 静态图片地址
			currIndex:0,
			dataType:'01',
			dataType1:'01',
			benefitList:{
				trade_money:0,
				trade_num:0,
				add_user_num:0,
				active_num:0,
				reach_num:0,
				machinery_num:0,
				total_machinery_num:0,
				machinery_noactive_num:0,
				machinery_active_num:0,
			},
			middleData:{},
			bottomData:{},
			type:'',
			statusBarHeight:0,
			usermsg: uni.getStorageSync('usermsg') ? uni.getStorageSync('usermsg') : {real_name:''},
			// 图表
			chart:null,
			pixelRatio:1,
			serverData:'',
			chartData:{
				"series": [
					{
						data: [{"name":"待激活","value":2},{"name":"已激活","value":1}]
					}
				]
			}
			};
    },
		 // 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.init();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
    onReady() {
	  // this.initChart('mayChart', this.chartData)	
    },
    onLoad () {
			this.init()
			//获取手机型号
			const that = this
			uni.getSystemInfo({
      success: function (res) {
      that.statusBarHeight = res.statusBarHeight<=10?10:res.statusBarHeight//状态栏高度
      that.platform = res.platform//机型
      console.log('platform',that.platform ,',statusBarHeight',that.statusBarHeight)
      }
    });
    },
		onShow() {
			this.usermsg=uni.getStorageSync('usermsg') ? uni.getStorageSync('usermsg') : {real_name:''}
		},
    methods: {
			init(){
				let isLogin = uni.getStorageSync('token') != '';
				console.log("isLogin：",isLogin);
				if(isLogin){
					this.benefitList={}
					this.getData()
					this.getMiddleData()
					this.getBottomData()
				}
			},
			// 统计-本月业绩
			getData(){
				const data={
					data_type:this.dataType
				}
				console.log('data',data)
				this.$Ajax('/api/summary/user/getUserData',data,res => {
						if(res.success){
							this.benefitList = res.data || {}
						}
					})
			},
			// 统计-我的机具
			getMiddleData(){
				const data={
					data_type:this.dataType1
				}
				console.log('data',data)
				this.$Ajax('/api/summary/user/getUserMachinery',data,res => {
						if(res.success){
							this.middleData = res.data
							this.chartData={
								"series": [
									{
										data: [
											{"name":"待激活","value":this.middleData.machinery_noactive_num || 0},
										{"name":"已激活","value":this.middleData.machinery_active_num || 0}]
									}
								]
							}
							this.initChart('mayChart', this.chartData)	
						}
					})
			},
			// 查询首页底部汇总-今日业绩
			getBottomData(){
			const data={
				type:this.type
			}
			console.log('data',data)
			this.$Ajax('/api/summary/page/getPageBottomData',data,res => {
					if(res.success){
						this.bottomData = res.data
					}
				})
			},
		// 点击切换-本月业绩
		changeTabData(){
			const that= this
			uni.showActionSheet({
				itemList: ['全部', '直属商户', '团队'],
				success: function (res) {
					// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					that.dataType = '0'+(res.tapIndex+1)
					that.getData()
				},
				fail: function (res) {
					console.log(res.errMsg);
				}
			});
		},
		// 点击切换-今日业绩
		changeTabData1(){
			const that= this
			uni.showActionSheet({
				itemList: ['全部', '直属商户', '团队'],
				success: function (res) {
					// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					that.type = res.tapIndex==1?'01': res.tapIndex==2?'02':''
					that.getBottomData()
				},
				fail: function (res) {
					console.log(res.errMsg);
				}
			});
		},
		// 点击切换-机具
		changeTabData2(){
			const that= this
			uni.showActionSheet({
				itemList: ['全部', '直属商户', '团队'],
				success: function (res) {
					// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					that.dataType1 ='0'+(res.tapIndex+1)
					that.getMiddleData()
				},
				fail: function (res) {
					console.log(res.errMsg);
				}
			});
		},
		// 点击跳转
		goURl(path){
			let isLogin = uni.getStorageSync('token') != '';
			console.log("isLogin：",isLogin);
			if (isLogin) {
				if(!this.usermsg.real_name){
					// setTimeout(()=>{
					// 	this.$tools.toastJump('请先实名','/pages/setup/editUserInfo')
					// },500)
					const that = this
					uni.showModal({
						title: '温馨提示',
						content: '为了方便您使用其他功能，请您先实名',
						success: function (res) {
							if (res.cancel) {
									console.log('用户点击取消');
									// 用户点击确定，继续执行跳转
									that.$tools.jump(path)
									return true;
								}
								if (res.confirm) {
									console.log('用户点击确定');
									setTimeout(()=>{
										that.$tools.jump('/pages/setup/editUserInfo')
									},500)
							}
						}
					})	
				}else{
					this.$tools.jump(path)
				}
			}else{
				// this.$tools.jump('/pages1/operate/login');
				this.$tools.toastRedirectTo('登录已失效，请重新登录', '/pages1/firtPage/firtPage');
			}
		},
        // 图表
		initChart(canvasId,chartData){
			const _self = this
			this.cWidth = uni.upx2px(250);
			this.cHeight = uni.upx2px(250); //设置宽高
			let ctx = uni.createCanvasContext('mayChart', this);
			this.chart=new uCharts({
				$this:_self,
				context:ctx,
				canvasId: canvasId,
				type: 'ring',
				dataLabel: true,
        		enableScroll: false,
				legend:{show:false},
				rotate: false,
        		rotateLock: false,
				fontSize:11,
				background:'#FFFFFF',
				pixelRatio:_self.pixelRatio,
				animation: true,
				color: ["#AD2926","#FFBB20"],
				// categories: chartData.categories,
				series: chartData.series,
				xAxis: {
					// disableGrid:true,
				},
				yAxis: {
					//disabled:true
				},
				dataLabel: true,
				width: _self.cWidth*_self.pixelRatio,
				height: _self.cHeight*_self.pixelRatio,
				disablepieStrok:true,
				dataLabel:false,
				extra: {
					ring: {
						// ringWidth:40*_self.pixelRatio,
						ringWidth:15,
						offsetAngle: -45,
						labelWidth:15,
					}
				}
			});
		},
		touchRing(e){
			this.chart.showToolTip(e, {
				format: function (item) {
					return item.name + ':' + item.data +'(台)'
				}
			});
		},
    },
};
</script>

<style lang="scss" scoped>
.index-header{
	text-align: center;
	font-weight: 500;
	font-size: 34rpx;
	color: #FFFFFF;
	height: 440rpx;
	background: linear-gradient( 143deg, #E15534 0%, #C03733 95%);
	padding: 0 48rpx;
	padding-top: 20rpx;
	/* #ifdef MP-WEIXIN */
	// padding-top:calc(20rpx + var(--status-bar-height)) !important;
	/* #endif */
}
.index{
	height: calc(100vh - 130rpx);
	.index-data1{
		overflow: hidden;
		width: 100%;
		margin: auto;
		margin-top: 30rpx;
		// padding: 0rpx 48rpx;
		overflow: hidden;
		.top{
			// @include flexBetween;
			@include flexLeft;
			.txt{
				font-weight: 600;
				font-size: 32rpx;
				color: #fff;
			}
			.ico{
				width: 20rpx;
				height: 20rpx;
				margin: auto;
			}
			.right{
				@include flexLeft;
				font-size: 24rpx;
				color: #fff;
			}
		}
		.info{
			@include flexBetween;
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			overflow: hidden;
			.ico{
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
			.ico-box{
				width: 32rpx;
				height: 32rpx;
			}
			.item{
				width: 50%;
				@include flexLeft;
				.txt{
					font-size: 28rpx;
					color: #fff;
					@include flexLeft;
				}
			.num{
				font-weight: 600;
				font-size: 32rpx;
				color: #fff;
				line-height: 38rpx;
				margin-top: 8rpx;
				text-align: left;
			}
			}
			.item:nth-of-type(1){
				.num{
					padding-left: 32rpx;
				}
			}
			.item:nth-of-type(2){
				justify-content: flex-end;
				text-align: right;
				.num{
					text-align: right;
				}
			}
		}
		.info1{
			@include flexBetween;
			padding-top: 40rpx;
			border-top: 1rpx solid rgba(255,255,255,0.1);
			.item{
				width: 33.3%;
				text-align: left;
				.ico{
					margin-right: 8rpx;
					width: 32rpx;
					height: 32rpx;
					display: inline-block;
					vertical-align: middle;
				}
				.txt{
					font-size: 28rpx;
					color: #fff;
				}
				.num{
					font-weight: 600;
					font-size: 32rpx;
					color: #fff;
					line-height: 38rpx;
					margin-top: 8rpx;
				}
				.dot{
					display: inline-block;
					width: 20rpx;
					height: 20rpx;
					margin-right: 16rpx;
					background: #00C15A;
				}
				.dot1{
					background: #F69B36;
				}
				.dot2{
					background: #0182FE;
				}
			}
			.item:nth-of-type(1){
				.num{
					padding-left: 36rpx;
				}
			}
			.item:nth-of-type(2){
				text-align: center;
			}
			.item:nth-of-type(3){
				text-align: right;	
			}
		}
	}
  .index-data2{
		overflow: hidden;
		width: 96%;
		margin: auto;
		margin-top:-40rpx;
		// margin-top: calc(-40rpx + var(--status-bar-height)) !important;
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx 24rpx;
		overflow: hidden;
		// height: calc((100vh - 280rpx) / 2 );
		height: calc((100% - 400rpx ) / 2);
		@include flexBetweenColumn;
		.title{
			width: 100%;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			@include flexBetween;
			.sort{
				@include flexLeft;
			}
			.ico{
				width: 32rpx;
				height: 32rpx;
				margin-left: 8rpx;
			}
		}
		.tab{
			@include flexLeft;
			width: 450rpx;
			margin: auto;
			margin-top: 28rpx;
			height: 72rpx;
			border-radius: 152rpx;
			border: 2rpx solid #666666;
			overflow: hidden;
			.item{
				font-size: 30rpx;
				color: #999999;
				width: 150rpx;
				text-align: center;
				height: 72rpx;
				line-height: 72rpx
			}
			.active{
				background: #AD2926;
				color:#fff;
				border-radius: 152rpx;
			}
		}
		.info{
			@include flexBetween;
			flex-wrap: wrap;
			margin-top: 0rpx;
			.item{
				width: 33.3%;
				text-align: center;
				margin-top: 40rpx;
				.ico{
					margin-right: 8rpx;
					width: 32rpx;
					height: 32rpx;
					display: inline-block;
					vertical-align: middle;
				}
				.txt{
					font-size: 28rpx;
					color: #999;
				}
				.num{
					font-weight: 600;
					font-size: 32rpx;
					color: #333;
					line-height: 38rpx;
					margin-top: 8rpx;
				}
			}
		}
	}
	.index-data3{
		overflow: hidden;
		width: 96%;
		margin: auto;
		margin-top: 32rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		overflow: hidden;
		height: calc((100% - 400rpx ) / 2 - 40rpx);
		padding-bottom: 0;
		.title{
			width: 100%;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			@include flexBetween;
			.sort{
				@include flexLeft;
			}
			.ico{
				width: 32rpx;
				height: 32rpx;
				margin-left: 8rpx;
			}
		}
		.chart-box{
			@include flexBetween;
			margin-top: 0rpx;
			/* #ifdef MP-WEIXIN */
			margin-top: 0rpx;
			/* #endif */
			padding: 0;
			.chart{
				width: 250rpx;
				height: 250rpx;
			}
			.info{
				width: 50%;
				height: 200rpx;
				@include flexBetweenColumn;
				.item{
					width: 100%;
					@include flexBetween;
					font-size: 24rpx;
					color: #000;
				}
				.p{
					font-size: 32rpx;
					color: #000;
				}
				.num{
					margin-top: 8rpx;
				}
				.dot{
					display: inline-block;
					width: 16rpx;
					height: 16rpx;
					margin-right: 10rpx;
					background: #AD2926;
					border-radius: 100%;
				}
				.dot1{
					background: #FFBB20;
				}
			}
		}
	}
	.ico1{
		width: 72rpx;
		height: 72rpx;
		margin-right: 8rpx;
		display: inline-block;
		vertical-align: middle;
	}
}
/* 针对宽度小于或等于360px的屏幕 */
@media (max-width: 320px) {
	.index .index2{
		// height: calc((100vh - 280rpx - var(--status-bar-height)) / 2 - 120rpx );
		height: calc((100% - 400rpx - var(--status-bar-height)) / 2);
	}
  .index .index-data3 {
    // height: calc((100vh - 280rpx) / 2 - 80rpx );
		height: calc((100% - 500rpx - var(--status-bar-height)) / 2);
		/* #ifdef MP-WEIXIN */
		height: calc((100vh - 500rpx) / 2 - 100rpx  );
		/* #endif */
  }
}
 
// 大尺寸的
@media (min-height: 812px) {
	.index .index-header{
		height: 560rpx;
	}
	.index .index-data1 .info{
		margin-top: 50rpx;
	}
	.index .index-data2{
		height: calc((100% - 520rpx ) / 2);
		margin-top: -80rpx;
	}
	.index .index-data3{
		height: calc((100% - 520rpx ) / 2 );
	}
}
</style>
